<template>
	<div id="table-page" ref="tablePage">
		<div class="form-table">
			<el-table
				ref="table"
				v-loading="loading"
				:data="tableData"
				@selection-change="handleSelectionChange"
				:border="border"
				@row-click="rowClick"
				size="mini"
				:header-cell-style="headerCellStyle"
				:row-key="rowKey"
				@sort-change="sortChange"
				v-bind="config || $attrs">
				<!-- 是否多选 -->
				<el-table-column
					type="selection"
					width="55"
					align="center"
					v-if="isSelect"
					:reserve-selection="isSelect" />
				<!-- 是否显示序号 -->
				<el-table-column
					type="index"
					width="55"
					align="center"
					label="序号"
					v-if="isIndex" />
				<!-- 操作插槽 -->
				<slot name="tableColAc"></slot>

				<!-- 表格列插槽 -->
				<slot name="tableCol"></slot>
			</el-table>
		</div>
		<div class="form-pagination">
			<el-pagination
				:layout="layout"
				:background="background"
				:pager-count="pagerCount"
				:current-page.sync="currentPage"
				:page-size.sync="pageSize"
				:page-sizes="pageSizes"
				:total="total"
				v-bind="$attrs"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				v-if="total > 0"
				:small="small"></el-pagination>
		</div>
	</div>
</template>

<script>
	/**
	 * 1 属性
	 *  background:按钮背景颜色
	 *  pager-count:页码按钮的数量，当总页数超过该值时会折叠
	 *  current-page:当前页
	 *  page-size:每页显示条目个数
	 *  page-sizes:每页显示个数选择器的选项设置
	 *  layout:组件布局
	 *  total:总页数
	 *
	 */
	export default {
		name: 'TablePage',
		data() {
			return {
				Height: '',
				// tableData: [],
				headerCellStyle: {
					// height: "36px",
				},
				maxHeight2: this.getTableHeight(),
			};
		},
		props: {
			rowKey: {
				type: [Function, String],
				default: 'id',
			},
			maxHeight: {
				type: [Number, String],
				default: document.documentElement.scrollHeight - 380 + 'px',
			},
			small: {
				type: Boolean,
				default: false,
			},
			border: {
				type: Boolean,
				default: false,
			},
			isSelect: {
				//  是否显示多选
				type: Boolean,
				default: false,
			},
			isIndex: {
				//  是否显示序号
				type: Boolean,
				default: false,
			},
			loading: {
				type: Boolean,
				default: false,
			},
			dataList: {
				type: Array,
				default() {
					return [];
				},
			},
			total: {
				required: true,
				type: Number,
			},
			page: {
				type: Number,
				default: 1,
			},
			limit: {
				type: Number,
				default: 20,
			},
			pageSizes: {
				type: Array,
				default() {
					return [10, 20, 30, 50];
				},
			},
			pagerCount: {
				type: Number,
				default: 5,
			},
			layout: {
				type: String,
				default: 'total,  prev, pager, next,sizes, jumper',
			},
			background: {
				type: Boolean,
				default: true,
			},
			config: {
				type: Object,
				required: false,
			},
		},
		computed: {
			currentPage: {
				get() {
					return this.page;
				},
				set(val) {
					this.$emit('update:page', val);
				},
			},
			pageSize: {
				get() {
					return this.limit;
				},
				set(val) {
					this.$emit('update:limit', val);
				},
			},
			tableData: {
				get() {
					return this.useVModel.call(this, this.dataList);
				},
				set(val) {
					this.$emit('update:dataList', val);
				},
			},
		},
		// watch: {
		//     dataList: {
		//         handler(val) {
		//             this.tableData = val;
		//         },
		//         deep: true,
		//     },
		// },
		created() {},
		mounted() {
			this.refRedirect.call(this, 'table');

			// this.$nextTick(()=>{
			//     this.Height = this.$refs.tablePage.offsetHeight
			//     console.log(this.Height)
			// })
			window.addEventListener(
				'resize',
				_.debounce(() => {
					this.maxHeight2 = this.getTableHeight();
				}, 1000),
			);
		},

		methods: {
			clearSelection() {
				this.$refs.table.clearSelection();
			},
			getTableHeight() {
				return document.documentElement.scrollHeight - 380 + 'px';
			},
			rowKeyFn(row) {
				return row[this.rowKey];
			},
			//setSizeCurrent绑定对应页面查询接口
			handleSizeChange(val) {
				if (this.currentPage * val > this.total) {
					this.currentPage = 1;
				}
				this.$emit('setSizeCurrent', {
					page: this.currentPage,
					limit: val,
				});
			},
			/*当前页数改变*/
			handleCurrentChange(val) {
				this.$emit('setSizeCurrent', {
					page: val,
					limit: this.pageSize,
				});
			},

			handleSelectionChange(val) {
				this.$emit('selectionChange', val);
			},
			rowClick(row, column, event) {
				this.$emit('rowClick', row);
			},
			sortChange(column, prop, order) {
				this.$emit('sortChange', column, prop, order);
			},
		},
	};
</script>

<style scoped>
	.form-pagination {
		text-align: right;
		margin-top: 20px;
	}
</style>
